<template>
  <div class="app-container" style="overflow: hidden" ref="AppContainerRef">
    <div class="search-container" ref="SearchContainerRef">
      <el-form :model="searchParam" :inline="true" label-width="95px">
        <SearchFormGroup
          ref="SearchFormGroupRef"
          :data="searchParam"
          @change-search="handleSearchChange"
          @change-gage-equip-code="changeEquipCode"
        />
        <el-form-item label="特性名称">
          <el-select
            v-model="searchParam.specificId"
            placeholder="请选择特性名称"
            clearable
            filterable
            :filter-method="customFilter5"
            :disabled="!canSelectSpecific"
            :loading="specificLoading"
            loading-text="加载中..."
            @change="specificChange"
          >
            <el-option
              v-for="item in filteredOptions5"
              :key="item.id"
              :label="item.paramName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="过程能力时间">
          <el-date-picker
            v-model="searchParam.searchTime"
            type="date"
            placeholder="请选择过程能力时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">
            <i-ep-search v-if="!searchLoading" />
            查询
          </el-button>
          <el-button @click="reset">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div ref="myDiv" id="hh" style="overflow-y: auto; overflow-x: hidden">
      <el-row :gutter="10">
        <!-- 单值图 -->
        <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>单值图</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <!-- <el-checkbox
                  v-model="singleChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                /> -->
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="singleCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getSingleData(1)"
                  >
                    <template #append>
                      <el-button :icon="Search" @click="getSingleData(1)" />
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
            <!-- 加载中 -->
            <div
              v-if="singleLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>
            <!-- 数据为空 -->
            <div v-if="!singleLoading && !singleData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="singleData?.processId">
              <pcm-monitor-line-chart
                :key="keyId + '1'"
                :id="keyId + '1'"
                :showName="singleChecked"
                :seriesData="singleData"
              />
              <div class="charts_des flex justify-center text-[14px] lh-[20px]">
                <div class="flex items-center">
                  <div class="flex items-center">
                    <span
                      class="squary"
                      :style="{
                        backgroundColor: '#3ae374',
                      }"
                    ></span
                    >公称尺寸：{{ singleData?.parameterStandards || "" }}
                  </div>
                  <div class="ml-4 flex items-center">
                    <span class="squary red_back"></span>尺寸公差：{{
                      showLineValue(
                        singleData?.lowerLimitValue,
                        singleData?.upperLimitValue
                      )
                    }}
                  </div>
                  <div class="ml-4 flex items-center">
                    <span class="squary yellow_back"></span>控制限值：{{
                      showLineValue(
                        singleData?.controlDown,
                        singleData?.controlUp
                      )
                    }}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!--  均值图 -->
        <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>均值图</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <!-- <el-checkbox
                  v-model="averageChecked"
                  label="节点显示特性值"
                  class="mr-3! h-[26px]!"
                /> -->
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!"
                    >子组样本数量</span
                  >
                  <el-input
                    v-model="averageGroupCount"
                    placeholder="请输入"
                    class="single_count_input w-[60px]! mr-3! ml-[5px]!"
                    @keyup.enter="getAverageData(1)"
                  >
                    <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                    /> </template
                > -->
                  </el-input>
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="averageCount"
                    placeholder="请输入"
                    class="single_count_input w-[60px]! ml-[5px]!"
                    @keyup.enter="getAverageData(1)"
                  >
                    <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                      
                    /> </template
                > -->
                  </el-input>
                  <el-button
                    :icon="Search"
                    plain
                    type="info"
                    class="search_btn1"
                    @click="getAverageData(1)"
                  />
                </div>
              </div>
            </div>
            <!-- 加载中 -->
            <div
              v-if="averageLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>
            <!-- 数据为空 -->
            <div v-if="!averageLoading && !averageData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="averageData?.processId">
              <pcmAvgMonitorChart
                :key="keyId + '3'"
                :id="keyId + '3'"
                :showName="averageChecked"
                :seriesData="averageData"
              />
              <div class="charts_des flex justify-center text-[14px] lh-[20px]">
                <div class="flex items-center">
                  <div class="ml-4 flex items-center">
                    <span
                      class="squary"
                      :style="{
                        backgroundColor: '#3ae374',
                      }"
                    ></span>
                    公称尺寸：{{ averageData?.parameterStandards || "" }}
                  </div>
                  <div class="ml-4 flex items-center">
                    <span class="squary red_back"></span>尺寸公差：{{
                      showLineValue(
                        averageData?.lowerLimitValue,
                        averageData?.upperLimitValue
                      )
                    }}
                  </div>
                  <!-- <div class="flex items-center">
                  <span class="squary yellow_back"></span>控制限：{{
                    showLineValue(
                      averageData?.controlDown,
                      averageData?.controlUp
                    )
                  }}
                </div> -->
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!--  阶段综合能力 阶段综合过程能力 -->
        <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>短期能力趋势</strong>
              <div class="text-[12px]">
                <!-- <div class="flex items-center">
                <el-checkbox
                  v-model="stateChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                />
              </div> -->
                <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                <el-input
                  v-model="stateCount"
                  placeholder="请输入"
                  class="single_count_input"
                  @keyup.enter="getStateData(1)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getStateData(1)"
                    /> </template
                ></el-input>
              </div>
            </div>
            <!-- 加载中 -->
            <div
              v-if="stateLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>
            <!-- 数据为空 -->
            <div v-if="!stateLoading && !stateData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="stateData?.processId">
              <pcmStateMonitorLineChart
                :key="keyId + '2'"
                :id="keyId + '2'"
                :showName="stateChecked"
                :seacher="searchParam"
                :seriesData="stateData"
                :count="stateCount"
              />
              <div class="charts_des flex justify-center text-[14px] lh-[20px]">
                <div class="flex items-center">
                  <div class="mr-4 flex items-center">
                    Cpk
                    <span
                      class="circleOne"
                      style="background-color: #4caf50"
                    ></span>
                  </div>

                  <div class="flex items-center">
                    Ppk<span
                      class="css-circle"
                      style="
                        width: 14px;
                        height: 14px;
                        border: 3px solid #4caf50;
                      "
                    ></span>
                  </div>
                </div>
              </div>
              <!-- <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公称尺寸：{{
                    showLineValue(
                      stateData?.lowerLimitValue,
                      stateData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制限：{{
                    showLineValue(stateData?.controlDown, stateData?.controlUp)
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>尺寸公差：{{
                    stateData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div> -->
            </div>
          </el-card>
        </el-col>
        <!-- 长期综合能力 长期综合过程能力 -->
        <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>长期过程能力趋势</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <!-- <el-checkbox
                  v-model="longChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                /> -->
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="longCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getLongData(1)"
                  >
                    <template #append>
                      <el-button
                        :icon="Search"
                        @click="getLongData(1)"
                      /> </template
                  ></el-input>
                </div>
              </div>
            </div>
            <!-- 加载中 -->
            <div
              v-if="longLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>
            <!-- 数据为空 -->
            <div v-if="!longLoading && !longData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="longData?.processId">
              <pcmLongMonitorLineChart
                :key="keyId + '5'"
                :id="keyId + '5'"
                :showName="longChecked"
                :count="longCount"
                :seacher="searchParam"
                :seriesData="longData"
              />
              <div class="charts_des flex justify-center text-[14px] lh-[20px]">
                <div class="flex items-center">
                  <div class="mr-4 flex items-center">
                    Cpk
                    <span
                      class="circleOne"
                      style="background-color: #4caf50"
                    ></span>
                  </div>

                  <div class="flex items-center">
                    Ppk<span
                      class="css-circle"
                      style="
                        width: 14px;
                        height: 14px;
                        border: 3px solid #4caf50;
                      "
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 工单信息 -->
        <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>工单信息</strong>
            </div>
            <!-- 加载中 -->
            <div
              v-if="workOrderLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>
            <!-- 数据为空 -->
            <div v-if="!workOrderLoading && !workOrderData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <pcm-monitor-sampling
              v-if="workOrderData?.processId"
              :key="keyId + '1'"
              :id="keyId + '1'"
              :params="workOrderData"
            />
          </el-card>
        </el-col>

        <!-- 附件下载 -->
        <!-- <el-col :lg="8" :md="8" :sm="8" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>附件下载</strong>
          </div>
          <div
            v-if="attachLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <pcm-monitor-attachment v-else :params="attachData" /> </el-card
      ></el-col> -->

        <!-- 特殊送检1 特殊送检状态过程能力 -->
        <!-- <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>特殊送检状态过程能力</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                    >特殊送检</span
                  >
                  <el-select
                    class="mr-[7px]"
                    v-model="specialSearchData"
                    placeholder="请选择特性项"
                    clearable
                    filterable
                    :loading="specificLoading"
                    loading-text="加载中..."
                    @change="specialSearchDataChange"
                    style="width: 130px"
                  >
                    <el-option
                      v-for="item in specialInspectionList"
                      :key="item.id"
                      :label="item.featureName"
                      :value="item.id"
                    />
                  </el-select>
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="specialCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getSpecialData(1)"
                  >
                    <template #append>
                      <el-button
                        :icon="Search"
                        @click="getSpecialData(1)"
                      /> </template
                  ></el-input>
                </div>
              </div>
            </div>

            <div
              v-if="specialLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>

            <div v-if="!specialLoading && !specialData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="specialData?.processId">
              <pcmSpecialMonitorLineChart
                key="4"
                id="4"
                :showName="specialChecked"
                :seacher="{
                  ...searchParam,
                  suffixType: specialSearchData || '',
                }"
                :count="specialCount"
                :seriesData="specialData"
                :specialSufftData="specialSearchData"
              />
            </div>
          </el-card>
        </el-col> -->

        <!-- 特殊送检2 特殊送检状态过程能力 -->
        <!-- <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>特殊送检状态过程能力</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                    >特殊送检</span
                  >
                  <el-select
                    class="mr-[7px]"
                    v-model="specialTwoSearchData"
                    placeholder="请选择特性项"
                    clearable
                    filterable
                    :loading="specificLoading"
                    loading-text="加载中..."
                    @change="specialTwoSearchDataChange"
                    style="width: 130px"
                  >
                    <el-option
                      v-for="item in specialInspectionList"
                      :key="item.id"
                      :label="item.featureName"
                      :value="item.id"
                    />
                  </el-select>
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="specialTwoCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getSpecialTwoData(1)"
                  >
                    <template #append>
                      <el-button
                        :icon="Search"
                        @click="getSpecialTwoData(1)"
                      /> </template
                  ></el-input>
                </div>
              </div>
            </div>

            <div
              v-if="specialTwoLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>

            <div v-if="!specialTwoLoading && !specialTwoData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="specialTwoData?.processId">
              <pcmSpecialMonitorLineChart
                key="6"
                id="6"
                :count="specialTwoCount"
                :showName="specialTwoChecked"
                :seacher="{
                  ...searchParam,
                  suffixType: specialTwoSearchData || '',
                }"
                :seriesData="specialTwoData"
              />
            </div>
          </el-card>
        </el-col> -->
        <!-- 特殊送检3 特殊送检状态过程能力 -->
        <!-- <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>特殊送检状态过程能力</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                    >特殊送检</span
                  >
                  <el-select
                    class="mr-[7px]"
                    v-model="specialThreeSearchData"
                    placeholder="请选择特性项"
                    clearable
                    filterable
                    :loading="specificLoading"
                    loading-text="加载中..."
                    style="width: 130px"
                    @change="specialThreeSearchDataChange"
                  >
                    <el-option
                      v-for="item in specialInspectionList"
                      :key="item.id"
                      :label="item.featureName"
                      :value="item.id"
                    />
                  </el-select>
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="specialThreeCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getSpecialThreeData(1)"
                  >
                    <template #append>
                      <el-button
                        :icon="Search"
                        @click="getSpecialThreeData(1)"
                      /> </template
                  ></el-input>
                </div>
              </div>
            </div>

            <div
              v-if="specialThreeLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>

            <div v-if="!specialThreeLoading && !specialThreeData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="specialThreeData?.processId">
              <pcmSpecialMonitorLineChart
                key="7"
                id="7"
                :showName="specialThreeChecked"
                :count="specialThreeCount"
                :seacher="{
                  ...searchParam,
                  suffixType: specialThreeSearchData || '',
                }"
                :seriesData="specialThreeData"
              />
            </div>
          </el-card>
        </el-col> -->

        <!-- 特殊送检4 特殊送检状态过程能力 -->
        <!-- <el-col :span="isContrast ? 24 : cardSpan" class="mb-[10px]">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between items-center title">
              <strong>特殊送检状态过程能力</strong>
              <div class="text-[12px]">
                <div class="flex items-center">
                  <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                    >特殊送检</span
                  >
                  <el-select
                    class="mr-[7px]"
                    v-model="specialFourSearchData"
                    placeholder="请选择特性项"
                    clearable
                    filterable
                    :loading="specificLoading"
                    loading-text="加载中..."
                    style="width: 130px"
                    @change="specialFourSearchDataChange"
                  >
                    <el-option
                      v-for="item in specialInspectionList"
                      :key="item.id"
                      :label="item.featureName"
                      :value="item.id"
                    />
                  </el-select>
                  <span class="c-[#838A9D] text-[13px] lh-[26px]!">节点数</span>
                  <el-input
                    v-model="specialFourCount"
                    placeholder="请输入"
                    class="single_count_input"
                    @keyup.enter="getSpecialFourData(1)"
                  >
                    <template #append>
                      <el-button
                        :icon="Search"
                        @click="getSpecialFourData(1)"
                      /> </template
                  ></el-input>
                </div>
              </div>
            </div>

            <div
              v-if="specialFourLoading"
              v-loading="true"
              class="w-full h-[300px]"
            ></div>

            <div v-if="!specialFourLoading && !specialFourData?.processId">
              <el-empty description="暂无数据" />
            </div>
            <div v-if="specialFourData?.processId">
              <pcmSpecialMonitorLineChart
                key="8"
                id="8"
                :count="specialFourCount"
                :showName="specialFourChecked"
                :seacher="{
                  ...searchParam,
                  suffixType: specialFourSearchData || '',
                }"
                :seriesData="specialFourData"
              />
            </div>
          </el-card>
        </el-col> -->
        <el-col
          v-for="(card, index) in cards"
          :key="index"
          :span="isContrast ? 24 : cardSpan"
          class="mb-[10px]"
        >
          <specialInspectionCard
            :index="index"
            :keyId="keyId"
            :specialInspectionList="specialInspectionList"
            :searchedParam="searchedParam"
            @remove="handleRemoveCard"
          />
        </el-col>

        <!-- 添加按钮 -->
        <el-col
          :span="isContrast ? 24 : 2"
          class="add_plus"
          style="
            height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          "
        >
          <!-- <el-button
            :icon="Plus"
            circle
            @click="handleAddCard"
            type="primary"
          /> -->

          <div class="circle-plus" role="button" @click="handleAddCard">
            <div class="plus-line horizontal"></div>
            <div class="plus-line vertical"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <el-row :gutter="10" /> -->
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useRoute, useRouter } from "vue-router";
import {
  getMdmproductinfosApi,
  getMdmprojectinfosApi,
  getMdminspectiontoolApi,
  getSpecificListApi,
  getMdmProcessEquipApi,
  getMdmProcessProjectApi,
  getMdminspectionGroupApi,
} from "@/utils/commonData";
import {
  getSingleDataMock,
  dataMock,
  attachDataMock,
  showLineValue,
  getLongDataApi,
  getStateDataApi,
  getSpecialDataApi,
  getSpecialTwoDataApi,
  getSpecialThreeDataApi,
} from "./index";
import { deepClone } from "@/utils/commonHooks";
import { Search } from "@element-plus/icons-vue";
import { useDictionary, useComputeTableHeight } from "@/utils/useTable"; // 引入
import SearchFormGroup from "@/views/pcm/pcmMonitoring/components/SearchFormGroup1.vue";
import _ from "lodash-es";

const props = defineProps({
  isContrast: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  keyId: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 产品型号
  productCode: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 设备名称
  equipCode: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 工序
  processCode: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const { isContrast, keyId, productCode, equipCode, processCode } =
  toRefs(props);

// 引入 useComputeTableHeight方法
const tableHeight = ref();
const myDiv = ref();

const maxCards = 4; // 最大卡片数量
const cards = ref([]); // 初始包含一个卡片

const handleAddCard = () => {
  cards.value.push({});
};

const handleRemoveCard = (index) => {
  cards.value.splice(index, 1);
};

defineOptions({
  name: "PCMPCMMONITORING",
  inheritAttrs: false,
});

/**
 * 工序列表获取的条件：项目不为空
 * 设备列表获取的条件：项目、工序不为空
 * 产品型号列表：无条件
 * 检具设备列表获取的条件：检具类型不为空
 * 特性值列表获取的条件：工序、设备、产品、检具不为空
 **/

// 初始化搜索参数数据
const searchParamInit = {
  // 工段
  workshopSectionId: "",
  workshopSectionCode: "",
  // 项目
  // projectCode: "",
  // projectId: "",
  // 工序
  processCode: "",
  processId: "",
  // 设备
  equipCode: "",
  equipId: "",
  // 产品型号
  productCode: "",
  productName: "",
  productId: "",
  // 检具类型
  gageEquipToolKind: "",
  // 检具名称
  gageEquipCode: "",
  gageEquipName: "",
  // 机器号
  gageEquipMarkCode: "",
  // 特性
  specificCode: "",
  specificId: "",
  specificName: "",
  toolGroupId: "",
  searchTime: "",
};

// 搜索项
const searchParam = reactive(deepClone(searchParamInit));
const searchedParam = reactive(deepClone(searchParamInit));
const searchLoading = ref(false);

// 处理传回数据
const handleSearchChange = (data) => {
  Object.assign(searchParam, data);
  // 可执行字段相关的特定逻辑
  if (searchParam.gageEquipCode) {
    searchParam.toolGroupId = oldGageEquipList1.value.filter(
      (item) => item.groupCode == searchParam.gageEquipCode
    )[0].id;
  } else {
    searchParam.toolGroupId = "";
  }
};
// 查询
async function search() {
  // console.log(searchParam);
  if (!searchParam.specificId) {
    ElMessage.error("请选择特性项");
    return;
  }
  searchLoading.value = true;
  Object.assign(searchedParam, { ...searchParam });
  const statusPromise = Promise.allSettled([
    getSingleData(),
    getAverageData(),
    geWorkOrderData(),
    geAttachData(),
    getLongData(),
    getStateData(),
    getSpecialData(),
    getSpecialTwoData(),
    getSpecialThreeData(),
    getSpecialFourData(),
  ]);

  const status = await statusPromise;

  searchLoading.value = false;
}

// 重置
function reset() {
  Object.assign(searchParam, { ...searchParamInit });
  Object.assign(searchedParam, { ...searchParamInit });

  console.log("重置searchParam", searchParam);
  // 数据重置
  singleData.value = {};
  averageData.value = {};
  workOrderData.value = {};
  attachData.value = [];
  // 配置项重置
  singleChecked.value = true;
  singleCount.value = 30;
  averageChecked.value = true;
  averageCount.value = 30;
  longData.value = {};
  longCount.value = 30;
  stateData.value = {};
  stateCount.value = 30;
  // 加载中重置
  searchLoading.value = false;
  singleLoading.value = false;
  averageLoading.value = false;
  workOrderLoading.value = false;
  attachLoading.value = false;
}
const rect = ref();

const SearchFormGroupRef = ref();
function changeInfo() {
  SearchFormGroupRef.value.searchParam.productCode = query.productCode;
  SearchFormGroupRef.value.searchParam.productId = query.productId;
  SearchFormGroupRef.value.searchParam.equipCode = query.equipCode;
  SearchFormGroupRef.value.searchParam.equipId = query.equipId;
  SearchFormGroupRef.value.searchParam.processCode = query.processCode;
  SearchFormGroupRef.value.searchParam.processId = query.processId;
  SearchFormGroupRef.value.searchParam.workshopSectionCode =
    query.workshopSectionCode;
  SearchFormGroupRef.value.searchParam.workshopSectionId =
    query.workshopSectionId;
  setTimeout(() => {
    SearchFormGroupRef.value.showRealCode(true, false);
  }, 700);
}

const query = useRoute().query;

const AppContainerRef = ref();
const SearchContainerRef = ref();
onMounted(() => {
  // 获取项目列表
  getProjectList();
  // 获取产品型号列表
  // getProductList();
  getGageEquipList("");
  // 检具分组
  getGageEquipList1("");
  // 在组件挂载后检查屏幕大小
  // 添加事件监听，以便在屏幕大小变化时更新条件
  window.addEventListener("resize", checkScreenSize);
  if (myDiv.value && !isContrast.value) {
    let hh = document.getElementById("hh");
    hh.style.height = `calc(100vh - ${
      SearchContainerRef.value.clientHeight + 15 + 120
    }px)`;
    // rect.value = myDiv.value.getBoundingClientRect();
    // let hh = document.getElementById("hh");
    // console.log("rect.value.top", myDiv.value, rect.value.top);
    // hh.style.height = `calc(100vh - ${rect.value.top + 25}px)`;
  }

  if (
    query.productCode ||
    query.equipCode ||
    query.processCode ||
    query.workshopSectionCode
  ) {
    // setTimeout(() => {
    console.log(
      "watchEffect",
      query.productCode,
      query.equipCode,
      query.processCode,
      query.productId,
      query.equipId,
      query.processId,
      query.workshopSectionCode
    );
    changeInfo();
    // console.log("AppContainerRef.value", AppContainerRef.value);
    AppContainerRef.value?.scrollTo({ top: 0, behavior: "smooth" });
    // }, 100);
  }
});

// 检具分组

const oldGageEquipList1 = ref<any>([]);
async function getGageEquipList1(type: string) {
  oldGageEquipList1.value = (await getMdminspectionGroupApi({})) || [];
}

// 通过工序查询设备列表
const equipList = ref(<any>[]);

async function getEquipList(id: string) {
  equipList.value = (await getMdmProcessEquipApi({ processId: id })) || [];
}

function equipChange(id: string) {
  if (id) {
    const current: any =
      equipList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.equipCode = current.equipCode || "";
  } else {
    searchParam.equipCode = "";
  }
}

// 获取工序列表
const processList = ref<any>([]);

async function getProcessList(id: string) {
  processList.value = (await getMdmProcessProjectApi({ projectId: id })) || [];
}

function processChange(id: string) {
  searchParam.equipId = "";
  searchParam.equipCode = "";
  if (id) {
    const current: any =
      processList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.processCode = current.processCode || "";
    getEquipList(id);
  } else {
    searchParam.processCode = "";
    equipList.value = [];
  }
}

// 获取项目列表
const projectList = ref<any>([]);

async function getProjectList() {
  projectList.value = (await getMdmprojectinfosApi({})) || [];
}

function projectChange(id: string) {
  searchParam.equipId = "";
  searchParam.equipCode = "";
  searchParam.processId = "";
  searchParam.processCode = "";
  if (id) {
    const current: any =
      projectList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.projectCode = current.projectCode || "";
    getProcessList(id);
    getProductList(id);
  } else {
    searchParam.projectCode = "";
    equipList.value = [];
    processList.value = [];
    productList.value = [];
  }
}

// 获取产品型号列表
const productList = ref<any>([]);

async function getProductList(id: string) {
  productList.value = (await getMdmproductinfosApi({ projectId: id })) || [];
}

function productChange(id: string) {
  if (id) {
    const current: any =
      productList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.productCode = current.productCode || "";
    searchParam.productCode = current.productCode || "";
  } else {
    searchParam.productCode = "";
  }
}

// 量检具类型变化
function toolKindChange(type: string) {
  searchParam.gageEquipCode = "";
  searchParam.gageEquipMarkCode = "";
  if (type) {
    getGageEquipList(type);
  } else {
    gageEquipList.value = [];
  }
}

// 特性值变化
function specificChange(id: string) {
  if (id) {
    const current: any =
      specificList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.specificCode = current.paramCode || "";
    searchParam.specificName = current.paramName || "";
  } else {
    searchParam.specificCode = "";
    searchParam.specificName = "";
  }
}

// 间距变化
const changeEquipCode = (id: string) => {
  if (id) {
    searchParam.specificCode = "";
    searchParam.specificName = "";
    searchParam.specificId = "";
  }
};

// 获取量检具列表
const gageEquipList = ref<any>([]);

async function getGageEquipList(type: string) {
  gageEquipList.value = (await getMdminspectiontoolApi({ toolKind: "" })) || [];
}

// 获取特性值列表
const specificList = ref<any>([]);
const specificLoading = ref(false);

async function getSpecificList() {
  specificLoading.value = true;
  specificList.value =
    (await getSpecificListApi({
      equipId: searchParam.equipId,
      toolGroupId: searchParam.toolGroupId,
      modelId: searchParam.productId,
      processId: searchParam.processId,
    }).finally(() => {
      specificLoading.value = false;
    })) || [];
  filteredOptions5.value = deepClone(specificList.value);
}
const filteredOptions5 = ref([]);
// 使用 debounce 包装过滤方法
const customFilter5 = _.debounce((query) => {
  if (!query) {
    filteredOptions5.value = [...specificList.value];
    return;
  }
  filteredOptions5.value = specificList.value.filter((option: any) =>
    option.paramName.toLowerCase().includes(query.toLowerCase())
  );
}, 300);

// 检测必填项，筛选特性值列表
const canSelectSpecific = ref(false);
watch(
  () => searchParam,
  (newVal) => {
    const arr = deepClone(newVal);
    // console.log("特性值newVal", arr);
    if (
      newVal.equipCode &&
      newVal.gageEquipCode &&
      newVal.productCode &&
      newVal.processCode
    ) {
      canSelectSpecific.value = true;
      getSpecificList();
    } else {
      // specificList.value = [];
      searchParam.specificId = "";
      searchParam.specificCode = "";
      searchParam.specificName = "";
      canSelectSpecific.value = false;
      specificList.value = [];
      filteredOptions5.value = [];
    }
  },
  {
    deep: true,
  }
);

// 获取单值图数据
const singleCount = ref(30); // 节点数
const singleChecked = ref(true); // 节点是否显示特性值
const singleLoading = ref(false);
const singleData = ref<any>({});

function getSingleData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (singleCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(singleCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  return new Promise(async (resolve, reject) => {
    singleData.value = {};
    singleLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/singleCurve",
      method: "post",
      data: {
        specificId: searchedParam.specificId,
        count: singleCount.value,
        searchTime: searchedParam.searchTime,
      },
    })
      .finally(() => {
        singleLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    singleData.value = data;
    // longData.value = data;
    // stateData.value = data;
    // specialData.value = data;
    // specialTwoData.value = data;
    // specialThreeData.value = data;
    singleCount.value = singleData.value.count
      ? singleData.value.count
      : singleCount.value;
    resolve("单值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

function isPositiveInteger(value: any) {
  return /^[1-9]\d*$/.test(value);
}

// 获取阶段综合过程能力
const stateCount = ref(30); // 节点数
const stateChecked = ref(true); // 节点是否显示特性值
const stateLoading = ref(false);
const stateData = ref<any>({});

async function getStateData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }

  if (stateCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(stateCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  stateData.value = {};
  stateLoading.value = true;
  stateData.value =
    (await getStateDataApi({
      type: "2",
      specificId: searchedParam.specificId,
      count: stateCount.value,
      searchTime: searchedParam.searchTime,
    })) || [];
  stateLoading.value = false;

  // if (!searchedParam.specificId) {
  //   ElMessage.error("请先选择特性项后，点击查询");
  //   return;
  // }
  // if (type && !isPositiveInteger(stateCount.value)) {
  //   ElMessage.error("请输入正整数");
  //   return;
  // }
  // return new Promise(async (resolve, reject) => {
  //   stateData.value = {};
  //   stateLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/stateCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: stateCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       stateLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   stateData.value = data;
  stateCount.value = stateData.value.count
    ? stateData.value.count
    : stateCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

// 获取均值图数据
const averageCount = ref(30); // 节点数
const averageGroupCount = ref(null); // 均值分组测量值个数
const averageChecked = ref(true); // 节点是否显示特性值
const averageLoading = ref(false);
const averageData = ref<any>({});

function getAverageData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }

  if (averageCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(averageCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  if (type && !isPositiveInteger(averageGroupCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  return new Promise(async (resolve, reject) => {
    averageData.value = {};
    averageLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/averageCurve",
      method: "post",
      data: {
        specificId: searchedParam.specificId,
        count: averageCount.value,
        groupCount: averageGroupCount.value,
        searchTime: searchedParam.searchTime,
      },
    })
      .finally(() => {
        averageLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    averageData.value = data;
    // 采集点数
    averageCount.value = averageData.value.count
      ? averageData.value.count
      : averageCount.value;
    // 均值采集点数
    averageGroupCount.value = averageData.value.groupCount
      ? averageData.value.groupCount
      : averageGroupCount.value;
    resolve("均值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   averageData.value = {};
  //   averageLoading.value = true;
  //   setTimeout(() => {
  //     averageData.value = getSingleDataMock(averageCount.value);
  //     averageLoading.value = false;
  //     resolve("均值图");
  //   }, 1500);
  // });
}

// 获取工单数据
const workOrderData = ref<any>({});
const workOrderLoading = ref(false);

async function geWorkOrderData() {
  // return new Promise(async (resolve, reject) => {
  //   workOrderData.value = {};
  //   workOrderLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParam.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       workOrderLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   workOrderData.value = data;
  //   resolve("工单详情");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    workOrderData.value = {};
    workOrderLoading.value = true;
    setTimeout(() => {
      workOrderData.value = dataMock;
      workOrderLoading.value = false;
      resolve("工单详情");
    }, 500);
  });
}

// 获取特殊综合过程能力1
const specialCount = ref(30); // 节点数
const specialChecked = ref(true); // 节点是否显示特性值
const specialLoading = ref(false);
const specialSearchData = ref("");
const specialSearchShaft = ref("");
const specialData = ref<any>({});

async function getSpecialData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (specialCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(specialCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  specialSearchData.value = "";
  specialSearchData.value = specialInspectionList.value[0].id;
  specialData.value = {};
  specialLoading.value = true;
  specialData.value =
    (await getSpecialDataApi({
      type: "3",
      specificId: searchedParam.specificId,
      count: specialCount.value,
      suffixType: `${specialSearchData.value}`,
      searchTime: searchedParam.searchTime,
    })) || [];
  specialLoading.value = false;
  // return new Promise(async (resolve, reject) => {
  //   specialData.value = {};
  //   specialLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialData.value = data;
  specialCount.value = specialData.value.count
    ? specialData.value.count
    : specialCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialSearchDataChange = async (e) => {
  if (e) {
    specialData.value =
      (await getSpecialDataApi({
        type: "3",
        specificId: searchedParam.specificId,
        count: specialCount.value,
        suffixType: `${specialSearchData.value}`,
      })) || [];
  } else {
    specialData.value = [];
  }
};

// 获取附件数据
const attachData = ref<any>([]);
const attachLoading = ref(false);

function geAttachData() {
  // return new Promise(async (resolve, reject) => {
  //   attachData.value = [];
  //   attachLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParam.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       attachLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   attachData.value = data || [];
  //   resolve("附件下载");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    attachData.value = [];
    attachLoading.value = true;
    setTimeout(() => {
      attachData.value = attachDataMock;
      attachLoading.value = false;
      resolve("附件下载");
    }, 1000);
  });
}

// 获取长期综合过程能力
const longCount = ref<number>(30); // 节点数
const longChecked = ref(true); // 节点是否显示特性值
const longLoading = ref(false);
const longData = ref<any>({});

async function getLongData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }

  if (longCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(longCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }

  longData.value = {};
  longLoading.value = true;
  longData.value =
    (await getLongDataApi({
      type: "1",
      specificId: searchedParam.specificId,
      count: longCount.value,
      searchTime: searchedParam.searchTime,
    })) || [];
  longLoading.value = false;

  // if (type && !isPositiveInteger(longCount.value)) {
  //   ElMessage.error("请输入正整数");
  //   return;
  // }
  // return new Promise(async (resolve, reject) => {
  //   longData.value = {};
  //   longLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/longCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: longCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       longLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   longData.value = data;
  longCount.value = longData.value.count
    ? longData.value.count
    : longCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

// 获取特殊送检综合过程能力2
const specialTwoCount = ref(30); // 节点数
const specialTwoChecked = ref(true); // 节点是否显示特性值
const specialTwoLoading = ref(false);
const specialTwoSearchData = ref("");
const specialTwoSearchShaft = ref("");
const specialTwoData = ref<any>({});

async function getSpecialTwoData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }

  if (specialTwoCount.value > 3000)
    return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(specialTwoCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }

  specialTwoSearchData.value = "";
  specialTwoSearchData.value = specialInspectionList.value[0].id;
  specialTwoData.value = {};
  specialTwoLoading.value = true;
  specialTwoData.value =
    (await getSpecialDataApi({
      type: "3",
      specificId: searchedParam.specificId,
      count: specialTwoCount.value,
      suffixType: `${specialTwoSearchData.value}`,
      searchTime: searchedParam.searchTime,
    })) || [];
  specialTwoLoading.value = false;
  // return new Promise(async (resolve, reject) => {
  //   specialTwoData.value = {};
  //   specialTwoLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialTwoCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialTwoCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialTwoLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialTwoData.value = data;
  specialTwoCount.value = specialTwoData.value.count
    ? specialTwoData.value.count
    : specialTwoCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialTwoSearchDataChange = async (e) => {
  if (e) {
    specialTwoData.value =
      (await getSpecialDataApi({
        type: "3",
        specificId: searchedParam.specificId,
        count: specialTwoCount.value,
        suffixType: `${specialTwoSearchData.value}`,
      })) || [];
  } else {
    specialTwoData.value = {};
  }
};

// 获取特殊送检综合过程能力3
const specialThreeCount = ref(30); // 节点数
const specialThreeChecked = ref(true); // 节点是否显示特性值
const specialThreeLoading = ref(false);
const specialThreeSearchData = ref("");
const specialThreeSearchShaft = ref("");
const specialThreeData = ref<any>({});

async function getSpecialThreeData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }

  if (specialThreeCount.value > 3000)
    return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(specialThreeCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  specialThreeSearchData.value = "";

  specialThreeSearchData.value = specialInspectionList.value[0].id;
  specialThreeData.value = {};
  specialThreeLoading.value = true;
  specialThreeData.value =
    (await getSpecialDataApi({
      type: "3",
      specificId: searchedParam.specificId,
      count: specialThreeCount.value,
      suffixType: `${specialThreeSearchData.value}`,
      searchTime: searchedParam.searchTime,
    })) || [];
  specialThreeLoading.value = false;

  // return new Promise(async (resolve, reject) => {
  //   specialThreeData.value = {};
  //   specialThreeLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialThreeCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialThreeCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialThreeLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialThreeData.value = data;
  specialThreeCount.value = specialThreeData.value.count
    ? specialThreeData.value.count
    : specialThreeCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialThreeSearchDataChange = async (e) => {
  if (e) {
    specialThreeData.value =
      (await getSpecialDataApi({
        type: "3",
        specificId: searchedParam.specificId,
        count: specialThreeCount.value,
        suffixType: `${specialThreeSearchData.value}`,
      })) || [];
  } else {
    specialThreeData.value = {};
  }
};

//  获取特殊送检综合过程能力4
const specialFourCount = ref(30); // 节点数
const specialFourChecked = ref(true); // 节点是否显示特性值
const specialFourLoading = ref(false);
const specialFourSearchData = ref("");
const specialFourSearchShaft = ref("");
const specialFourData = ref<any>({});

async function getSpecialFourData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (specialFourCount.value > 3000)
    return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(specialFourCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  specialFourSearchData.value = "";

  specialFourSearchData.value = specialInspectionList.value[0].id;
  specialFourData.value = {};
  specialFourLoading.value = true;
  specialFourData.value =
    (await getSpecialDataApi({
      type: "3",
      specificId: searchedParam.specificId,
      count: specialFourCount.value,
      suffixType: `${specialFourSearchData.value}`,
      searchTime: searchedParam.searchTime,
    })) || [];
  specialFourLoading.value = false;

  // return new Promise(async (resolve, reject) => {
  //   specialFourData.value = {};
  //   specialFourLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialFourCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialFourCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialFourLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialFourData.value = data;
  specialFourCount.value = specialFourData.value.count
    ? specialFourData.value.count
    : specialFourCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialFourSearchDataChange = async (e) => {
  if (e) {
    specialFourData.value =
      (await getSpecialDataApi({
        type: "3",
        specificId: searchedParam.specificId,
        count: specialFourCount.value,
        suffixType: `${specialFourSearchData.value}`,
      })) || [];
  } else {
    specialFourData.value = {};
  }
};

const cardSpan = ref(changeSpan(window.innerWidth));

onUnmounted(() => {
  // 清理事件监听器
  window.removeEventListener("resize", checkScreenSize);
});

const checkScreenSize = () => {
  cardSpan.value = changeSpan(window.innerWidth);
};

// 共60份  60/2
function changeSpan(innerWidth: number) {
  if (innerWidth < 768) {
    return 24;
  } else if (innerWidth >= 768 && innerWidth < 992) {
    return 24;
  } else if (innerWidth >= 992 && innerWidth < 1400) {
    return 12;
  } else if (innerWidth >= 1400 && innerWidth < 1800) {
    return 12;
  } else if (innerWidth >= 1800 && innerWidth < 1920) {
    return 8;
  } else if (innerWidth >= 1920) {
    return 8;
  }
}

// 获取特性送检列表
const specialInspectionList = ref<Array<object>>([]);
const getSpecialInspectionList = async () => {
  await request({
    url: "/dmpDosPcm/pcmspecialrule/getList",
    method: "post",
    data: {},
  }).then((res) => {
    specialInspectionList.value = res.data;
    // console.log(" specialInspectionList.value", specialInspectionList.value);
  });
};
onMounted(() => {
  getSpecialInspectionList();
});
</script>
<style lang="scss" scoped>
:deep(.search-container) {
  .el-input__wrapper {
    width: 170px;
  }
}

:deep(.table-container) {
  height: 380px;
  overflow: visible;

  .el-card__body {
    padding: 15px;

    .el-empty {
      height: 300px;

      .el-empty__image {
        width: 60px;
      }
    }

    .el-loading-spinner {
      svg {
        width: 24px;
        height: 24px;
      }
    }

    .title {
      .el-input__inner {
        height: 24px;
      }

      strong {
        color: #091e40;
        font-size: 16px;
      }

      .el-checkbox__input {
        margin-top: -3px;
      }

      .el-checkbox__label {
        font-size: 13px;
        color: #838a9d;
        padding-left: 4px;
        line-height: 26px !important;
      }

      .single_count_input {
        width: 100px;
        margin-left: 8px;
        height: 26px;

        .el-input-group__append {
          padding: 0px;

          button {
            margin: 0;
            padding: 0 7px;
          }
        }

        .el-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
        }
      }
    }

    .search_btn {
      height: 26px;
      width: 36px;
      margin-left: 4px;
      background-color: var(--el-fill-color-light);
      color: var(--el-color-info);

      .el-icon {
        width: 18px !important;
        height: 18px !important;
      }
    }

    .charts_des {
      // margin-top: 5px;
      color: #838a9d;
      font-size: 13px;
      font-family: "DINLight";

      .squary {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 3px;
        margin-right: 3px;
      }
      .circleOne {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 3px;
      }
    }
  }
}
.css-circle {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
:deep(.search_btn1) {
  height: 26px;
  width: 36px;
  margin-left: 4px;
  background-color: var(--el-fill-color-light);
  color: var(--el-color-info);

  .el-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

.circle-plus {
  position: relative;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #79bbff;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-plus:hover {
  transform: scale(1.1);
}

.plus-line {
  position: absolute;
  background-color: white;
  transition: all 0.3s ease;
}

.horizontal {
  width: 50%;
  height: 2px;
}

.vertical {
  width: 2px;
  height: 50%;
}

/* 展开/收起动画 */
.circle-plus.active .vertical {
  transform: rotate(90deg);
}

.circle-plus:not(.active) .vertical {
  transform: rotate(0deg);
}

/* 禁用动画的版本 */
.circle-plus.no-animation .plus-line {
  transition: none;
}
</style>
